<template>
	<!-- v-mode 专门收集表单信息 -->
	<!-- autofocus 自动获取光标 -->
	<input type="text" autofocus :value="name"> <br>
	<input type="text" v-model="school"> <br>
	性别
	<input type="radio" v-model="gender" name="gender" value="男" /> 男
	<input type="radio" v-model="gender" name="gender" value="女" /> 女 <br />
	所在地
	<select name="adder" id="" v-model="address">
		<option value="">请选择</option>
		<option value="河北省">河北省</option>
		<option value="河南省">河南省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖南省">湖南省</option>
	</select>

	<br />
	自我介绍 <textarea v-model="info" name="info" id="" cols="50" rows="3"></textarea>
	<br />
	爱好 :
	<input type="checkbox" name="hobby" v-model="hobby" value="大蓝旗" />
	<input type="checkbox" name="hobby" v-model="hobby" value="足有" />
	<input type="checkbox" name="hobby" v-model="hobby" value="勾选" />
</template>

<script>
export default {}
</script>
<script setup>

import { ref } from 'vue'
let name = ref("张三")
let school = ref("青芒")
let info = ref('')
let address = ref('')
let gender = ref('男')
// 数组变成响应式,数组的绑定,不要使用reactive
let hobby = ref([])
</script>

<style></style>
